<template lang='pug'>
.shop-fir
    .top
        .flgto.iconfont.icon-confirm-line(:class="{'active':item.flg}" @click="$emit('flgto',item.id)")
        img(:src="item.cover")
        .content
            h4 {{item.name}}
            p 售价：{{item.price}} 元
            van-stepper(v-model="item.num" @change="$emit('change',[$event,item.id])")
        .del
            span.iconfont.icon-shanchu(@click="$emit('del',item.id)")
    ul(v-if="item.flg")
        li(v-for="d in item.arr" :key="d")
            .left
                img(:src="item.bao")
                p {{d}}
            span 选购
</template>
 
<script>
import Vue from 'vue';
import { Stepper } from 'vant';
Vue.use(Stepper);
export default {
  name: "vueName",
  props: ["item"],
  data() {
    return {
      msg: "Welcome to your vueName",
    };
  },
  components:{
  }
};
</script>
 
<style scoped lang="sass">
.shop-fir
    width: 100%
    padding: .1rem
    // border: 1px solid #ccc
    margin-top: .1rem
    align-items: center
    justify-content: space-around
    .top
        width: 100%
        height: 1.1rem
        display: flex
        align-items: center
        justify-content: space-around
        .content
            width: 50%
            h4
                font-size: .14rem
                color: #666
                font-weight: normal
            p
                font-size: .12rem
                color: #999
        .flgto
            width: .2rem
            height: .2rem
            border: 1px solid #ccc
            border-radius: 50%
            text-align: center
            color: #fff
            font-size: .12rem
            line-height: .2rem
            font-weight: bold
            &.active
                background: #ff5722
                border: none
        img
            width: 25%
            height: 80%
            border: 1px solid #ccc
        .del
            span 
                color: #999
    ul
        width: 100%
        padding: .05rem
        li
            widht: 100%
            height: .5rem
            background: #f6f6f6
            margin-top: .1rem
            display: flex
            justify-content: space-around
            align-items: center
            .left
                width: 50%
                display: flex
                align-items: center
                justify-content: space-between
                font-size: .12rem
            img
                width: .2rem
                height: .2rem
            span 
                color: #ff5722
                font-size: .12rem
</style>